<template>
  <!-- v-if -->
  <h1 v-if="user == 'vip'">欢迎vip</h1>
  <h1 v-else>充钱充钱充钱</h1>
  <button @click="toggle">切换</button>

  <!-- v-show -->
  <h1 v-show="isShow">通过设置display实现</h1>
  <button @click="show">显示</button>

  <!-- v-for -->
  <!-- 数组 -->
  <ol>
    <li v-for="(item, index) in news" :key="index">
      {{ item.title }}--{{ item.tag }}--{{ item.num }}
    </li>
  </ol>
  <!-- 对象 -->
  <ul>
    <li v-for="(value, keys) in person" :key="keys">{{ keys }}:{{ value }}</li>
  </ul>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      user: "vip",
      isShow: false,
      news: [
        {
          title: "佩罗西访问亚洲",
          tag: "沸",
          num: "366万",
        },
        {
          title: "中国国家版本馆开业",
          tag: "新",
          num: "98万",
        },
      ],
      person: {
        name: "小明",
        age: 16,
        sex: "male",
      },
    };
  },
  methods: {
    toggle() {
      this.user = "normal";
    },
    show() {
      this.isShow = !this.isShow;
    },
  },
  computed: {},
  watch: {},
};
</script>

<style scoped>
</style>
